<template>
  <van-action-sheet v-model="show" title="频道管理">
    <div class="title">
      我的频道
      <van-button @click="isEdit = !isEdit" type="danger" plain size="mini">
        {{ isEdit ? '取消' : '编辑' }}
      </van-button>
    </div>
    <van-grid>
      <van-grid-item v-for="(item, index) in channelList" :key="item.id">
        <span @click="into(index)" :class="{ active: index === value }">
          {{ item.name }}</span
        >
        <van-icon
          name="cross"
          v-show="index !== 0 && isEdit"
          @click="$emit('del', index)"
        />
      </van-grid-item>
    </van-grid>
    <div class="title">可选频道</div>
    <van-grid>
      <van-grid-item
        v-for="item in optList"
        :key="item.id"
        :text="item.name"
        @click="$emit('add', item)"
      ></van-grid-item>
    </van-grid>
  </van-action-sheet>
</template>

<script>
export default {
  props: {
    channelList: {
      type: Array,
      required: true
    },
    allList: {
      type: Array,
      required: true
    },
    value: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      show: false,
      isEdit: false
    }
  },
  methods: {
    into (index) {
      this.$emit('input', index)
      this.show = false
    }
  },
  computed: {
    // optList () {
    //   const list = this.allList.filter(v1 => {
    //     const res = this.channelList.find(v2 => v2.id === v1.id)
    //     if (!res) {
    //       return true
    //     } else {
    //       return false
    //     }
    //   })
    //   return list
    // }

    // 以上代码可简化为：
    optList () {
      return this.allList.filter(
        v1 => !this.channelList.find(v2 => v2.id === v1.id)
      )
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  padding: 20px;
}
.active {
  color: red;
}
.van-icon {
  position: absolute;
  right: 3px;
  top: 2px;
}
</style>
